<template>
 <li class="item">
    <div class="card">
       <div class="img">
           <img :src="require(`../../assets/img/${item.name}.jpg`)" alt="">
           <div class="text">
               <h1>{{ item.name }}</h1>
               <h2>{{ item.startday }}</h2>
           </div>
       </div>
    </div>
 </li>

</template>

<script>
export default {
    props:{
        item:Object,
    }
}
</script>

<style lang="less" scoped>
.item{
    padding: .1rem .15rem;
    box-sizing: border-box;
    .card{
        border: 1px solid #ddd;
        border-radius: .15rem;
        overflow: hidden;
        background: #fff;
        box-shadow: .01rem .03rem .05rem #999;
        .img{
            position:relative;
            height: 2.15rem;
            .text{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.4);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
             h1{
                color: #ed4040;
                font-size: .5rem;
                font-weight: bold;
             }
             h2{
                color: #fff;
                margin-top :0.15rem;
             }
            }
        }
    }
 }
</style>